
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta name="author" content="com.hzy.it">
        <meta name="description" content=com.hzy>
        <meta name="copyright" content="com.hzy">
        <title>End List</title>

       <!-- <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />-->
        <link href="css/bootstrap.min.css" rel="stylesheet" />
        <link href="css/select2.min.css" rel="stylesheet" />

        <script src="js/jquery.min.js"></script>
        <!--<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>-->
        <script src="js/select2.min.js"></script>
        <script src="js/i18n/zh-CN.js"></script>
    </head>
    <body>
        <input id="test" type="button" value="test"/>
        <div style="width: 600px;height: 800px;margin: auto;padding: 20px;border: solid 1px darkseagreen">
            <select id="sel_test" style="width: 200px">
                <!--<option value="aa">aaaaa</option>
                <option value="bb">bbbbb</option>
                <option value="cc">ccccc</option>
                <option value="dd">ddddd</option>-->
            </select>
        </div>
    </body>
    <script>
        ;(function(){
            $("#test").click(function(){
                alert("select value:" + $("#sel_test").val());
            });

            var data = [
                {id:'aa',text:'aaaaa'},
                {id:'bb',text:'bbbbb'},
                {id:'cc',text:'ccccc'},
                {id:'dd',text:'ddddd',selected:false},  // 默认选择
                {id:'ee',text:'eeeee', disabled:true}, // 选项不可用,disabled
            ];

            $("#sel_test").select2({
                tags: "true",
//                data:data, // 数据
                placeholder:'--请选择--', // 占位符
                allowClear: true,    // 显示清空内容图标
//                minimumResultsForSearch: Infinity, // 隐藏搜索框
//                maximumSelectionLength: 2, // 最多选择条目限制
//                disabled:false, // 下拉框是否可用,true:不可用,false:可用
//                multiple:true   // 是否多选
//                theme : 'classic' // 主题,
                width:300,           // 宽度
//                language: 'es',    // 语言
//                templateResult: function(data)
//                {
//                    return $('<span><p style="width: 20px;height:10px;background: red"></p>' + data.text + '</span>');
//                },

            });
            $("#sel_test").select2({tags:true,data:data});
            var sel = $("#sel_test");
            // select2 事件处理
            sel.on("select2:change",function(){
                alert("select2 change...");
            });
//            sel.on("select2:open",function(){
//                alert("select2 open...");
//            });
//            sel.on("select2:close",function(){
//                alert("select2 close...");
//            });
            sel.on("select2:select",function(a,b,c){
                alert("select2 select...");
            });
//            sel.on("select2:unselect",function(){
//                alert("select2 unselect...");
//            });
            sel.on("change",function(){
                alert("on change...");
            });
        })();

    </script>
</html>
